In my previous post, I talked about, as part of building a interactive navigation menu, how to detect the section the current view is in and highlight the corresponding navigation menu item. This post is going to finish the work by adding actions that make the navigation menu stay on top of the view.
First, let me start by saying that a new feature is recently added to Axure that can pin a dynamic panel to browser. Right click the panel and you will fine the option.
However, this always keeps the same top margin between the panel and the top of the view. What we want is to only pin the panel in place when it is about to be out of the view. In other words, we want the panel to start moving along with the page when it is about to be scrolled out of the view.
So how do we know if the panel is about to be scrolled out of the view? This can be detected by checking whether the distance scrolled vertically is greater than the y position of the first horizontal line (our panel’s top edge aligns with the line). This is going to be the condition of our action.
When the page is scrolled past the first line, part of the panel will be out of the view. How do we pin it in the view instead? We just need to immediately move that outside part back in. In other words, we need to move the panel down by a distance that equals to the height of the part that is out of the view. Below diagram shows how we can calculate this distance. Scroll Y is how much has been scrolled. Panel’s Y value is the distance from the top of the page to the top edge of the panel. The difference between these 2 variables is the distance we need to move the panel down, so that the green part is back in the view.
Once we are clear on the approach, we can add a new action on ‘OnWindowScroll’ event that moves the panel back in when it is scrolled out of the view. The Target here is the panel itself because we are moving it. It is a quick way to get a widget’s property.
Note that I added 20 pixels of top-margin at the end. It is not necessary. But if you added some margin, you need to remove the margin once the view is back to the initial position, so that the panel is also back to its initial position. Below I have another action that moves the panel back to its original position when the page is scrolled back to top.
Here is a demo of the navigation menu. Hope this helps!
Stuff 